<template>
	<view>
		<u-navbar :border-bottom="false">
		</u-navbar>
		<view class="u-m-x-30 u-p-b-20 lurk">
			<text class="u-font-50">选择群聊</text>
		</view>
		<view class="search-bar"></view>
		<view class="head" :style="{top:`${navBar}px`}">
			<view class="u-m-x-30 u-p-b-20">
				<text class="u-font-50 text-bold">选择群聊</text>
			</view>
			<view class="search-bar">
				<u-search v-model="key" placeholder="搜索" :show-action="false"></u-search>
			</view>
		</view>
		<view class="bg-white u-flex u-p-x-30 u-p-y-20 u-border-bottom"
			v-for="(item,index) in list" 
			:key="index"
			@tap="pick(item)"
		>
			<u-avatar :src="item.avatar" mode="square" size="110"></u-avatar>
			<view class="u-m-l-20">
				<view>
					<text class="u-font-36">{{item.name}}</text>
				</view>
				<view class="u-flex u-m-t-10">
					<text v-if="userId == item.userId" class="cu-tag sm bg-orange radius u-m-r-10">群主</text>
					<text class="u-font-24 text-gray">{{item.userCount}}人</text>
				</view>
			</view>
		</view>
		<u-popup v-model="ask.show" mode="center" :border-radius="20" width="550rpx">
			<view class="u-p-30">
				<view class="u-font-36 text-bold">
					群聊邀请
				</view>
				<view class="u-flex u-m-t-40 u-p-20 bg-gray radius">
					<u-avatar :src="cur.avatar" mode="square" size="90"></u-avatar>
					<view class="u-m-l-20">
						<text class="u-font-32">{{cur.name}}</text>
					</view>
				</view>
				<view class="u-flex u-m-t-40">
					<view class="u-flex-1 u-p-20 bg-gray radius u-text-center u-font-28" @tap="cancel()">
						取消
					</view>
					<view class="u-m-l-30 u-flex-1 u-p-20 bg-theme radius u-text-center u-font-28" @tap="confirm()">
						发送名片
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapGetters,mapActions} from "vuex"
	import { goback } from "@/utils/util";
	export default {
		data() {
			return {
				key:'',
				ask:{
					show:false
				},
				cur:{},
				eventChannel:null
			};
		},
		computed:{
			...mapGetters('user',['userId']),
			...mapGetters('addr',['groups']),
			list(){
				return this.groups.filter(({name})=>name.includes(this.key))
			}
		},
		onLoad() {
			this.eventChannel = this.getOpenerEventChannel();
		},
		methods:{
			pick(item){
				this.cur = item
				this.showAsk()
			},
			showAsk(){
				this.ask.show = true
			},
			closeAsk(){
				this.ask.show = false
			},
			confirm(){
				this.closeAsk()
				this.eventChannel&&this.eventChannel.emit('choose',this.cur)
				goback()
			},
			cancel(){
				this.closeAsk()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lurk{
		opacity: 0;
	}
	.head{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #FFFFFF;
	}
	.search-bar{
		height: 90rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
</style>
